@left: 60px;

.after-focus {
  transform: scale3d(1.05, 1.05, 1.05);
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  outline: solid 3px #ffffff;
  z-index: 9999;
}

#index{
  position: absolute;
  width: 1920px;
  height: 1080px;
  left:0;
  top:0;
  background:url("http://img.alicdn.com/tps/TB10Aa5JFXXXXawXFXXXXXXXXXX-1920-1080.jpg_.webp") center no-repeat;
  background-size: cover;

  .navigation-wrapper{
    position: absolute;
    width:1719px;
    height:68px;
    left:107px;
    top:182px;
    overflow: hidden;
    .scroll-list{
      height:68px;
      overflow: hidden;
      .fe-focus{
        border: solid 3px rgba(255,255,255,1) !important;
        color: #ffffff !important;
      }
      .fe-cache{
        background-color: #0d151f;
        border: solid 3px rgba(255,255,255,0.5);
      }
      .navigation-item{
        float: left;
        position: relative;
        width: 180px;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        text-align: center;
        margin-top: 1px;
        border-radius: 31px;
        border: solid 3px transparent;
        color: #999999;
      }
    }
  }
  .content-wrapper{
    position: absolute;
    width:1920px;
    height:1080px;
    left:0;
    top:0;
    .scroll-list{
      height:1080px;
      overflow: hidden;
    }
  }
}

.content-item-wrapper{
  float: left;
  position: relative;
  height: 1080px;
  width: 1920px;
  .scroll-list{
    height: 1080px;
    width: 1920px;
    .content-item{
      position: absolute;
      &.fe-focus{
        .after-focus;
      }
      &.index1{
        width: 251px;
        height: 251px;
        left: 114px;
        top: 282px;
      }
      &.index2{
        width: 251px;
        height: 251px;
        left: 387px;
        top: 282px;
      }
      &.index3{
        width: 251px;
        height: 251px;
        left: 114px;
        top: 555px;
      }
      &.index4{
        width: 251px;
        height: 251px;
        left: 387px;
        top: 555px;
      }
      &.index5{
        width: 524px;
        height: 524px;
        left: 660px;
        top: 282px;
      }
      &.index6{
        width: 251px;
        height: 251px;
        left: 1206px;
        top: 282px;
      }
      &.index7{
        width: 251px;
        height: 251px;
        left: 1479px;
        top: 282px;
      }
      &.index8{
        width: 251px;
        height: 251px;
        left: 1206px;
        top: 555px;
      }
      &.index9{
        width: 251px;
        height: 251px;
        left:1479px;
        top: 555px;
      }
    }
  }
}

.content-musiclist-wrapper{
  float: left;
  position: relative;
  height: 1080px;
  width: 1920px;
  .scroll-list{
    height: 1080px;
    width: 1920px;
    .content-item{
      position: absolute;
      width: 503px;
      height: 251px;
      &.fe-focus{
        .after-focus;
      }
      &.index1{
        left: 114px;
        top: 282px;
      }
      &.index2{
        left: 671px;
        top: 282px;
      }
      &.index3{
        left: 1227px;
        top: 282px;
      }
      &.index4{
        left: 114px;
        top: 555px;
      }
      &.index5{
        left: 671px;
        top: 555px;
      }
      &.index6{
        left: 1227px;
        top: 555px;
      }
    }
  }
}

.content-item .content-item-img{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(./icon_default.png) center no-repeat;
  background-size: cover;
  background-size:100%;
  z-index: 1;
}
.content-item .content-item-text{
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  line-height: 60px;
  font-size: 30px;
  color:#ffffff;
  overflow: hidden;
  text-overflow:ellipsis;
  background-color: #0d151f;
  z-index: 2;
}
.content-item .content-broadcast{
  height: 60px;
  bottom: 20px !important;
  line-height: 60px;
  font-size: 30px;
  color:#ffffff;
  overflow: hidden;
  text-align: center !important;
  background-color: transparent !important;
  z-index: 2;
}
.scroll-list .content-item-more{
  position: absolute;
  width: 130px;
  height: 45px;
  left:1600px;
  top:820px;
  line-height: 45px;
  font-size: 30px;
  border-radius: 25px;
  border: solid 3px rgba(255,255,255,0.5);
  color:#ffffff;
  background-color: #0d151f;
  text-align: center;
  &.fe-focus{
    border: solid 3px rgba(255,255,255,1) !important;
  }
}
